<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪对象子选择器</title>
    <style>
        /* 伪对象选择器 */
        /* 在p标签后面加东西，在dom上面不显示，也不可以使用js操作 */
        p:after {
            content: "--[after]--";
            background: #ffff00;
        }

        /* 在p标签前面加东西，在dom上面不显示，也不可以使用js操作 */
        p:before {
            content: "--[after]--";
            background: #ff0000;
        }
        /* 所以p元素的父元素的第二个子元素的每个 p 的背景色： */
        p:nth-child(2) {
            background: #ffff00;
        }

        /* 子选择器 */
        /* 选择id="content"底下的p标签，只选择第一层的p标签 */
        #content>p {
            background: #ff0000;
        }

        /* 相邻选择器 */
        /* 选择与id为content相邻的标签 */
        #content+p {
            color: #00ff00;
        }
        
        /* 包含选择器 */
        /* 选择id为content地下的全部p标签 */
        #content p {
            color: #ff0000;
        }
    </style>
</head>

<body>
    <div id="content">
        <p>0001</p>
        <p>0002</p>
        <p>0003</p>
        <div>
            <p>aaa</p>
            <p>bbb</p>
        </div>
    </div>
    <p>0004</p>
    <p>0005</p>
    <p>0006</p>
    <p>0007</p>
</body>

</html>